<template>
  <div>
    <Wrap>
      <div slot="main_wrap">
        <avue-crud ref="crud"
            v-model="form"
            :page.sync="page"
            :data="tableData"
            :permission="permissionList"
            :table-loading="tableLoading"
            :option="tableOption"
            @on-load="getList"
            @search-change="searchChange"
            @refresh-change="refreshChange"
            @size-change="sizeChange"
            @current-change="currentChange">
            <template
              slot="meterProdNameSearch"
              slot-scope="scope">
              <el-select v-model="meterProdName"
                      placeholder="请选择仪表产品"
                      @change="changeYb"
                      clearable>
                  <el-option v-for="item in optionsLy"
                          :key="item.id"
                          :label="item.label"
                          :value="item.value">
                  </el-option>
              </el-select>
            </template>
            <template
              slot="meterNameSearch"
              slot-scope="scope">
              <el-select v-model="meterName"
                      placeholder="请选择项目仪表"
                      clearable filterable>
                  <el-option v-for="item in optionsYb"
                          :key="item.id"
                          :label="item.deviceName"
                          :value="item.deviceName">
                  </el-option>
              </el-select>
            </template>
            <template
              slot="paramNameSearch"
              slot-scope="scope">
              <el-select v-model="paramName"
                      placeholder="请选择仪表功能点"
                      clearable filterable>
                  <el-option v-for="item in optionsYbgnd"
                          :key="item.id"
                          :label="item.label"
                          :value="item.value">
                  </el-option>
              </el-select>
            </template>
        </avue-crud>
      </div>
    </Wrap>
  </div>
</template>

<script type="text/ecmascript-6">
import Wrap from '@/components/energy-wrap'
import {getMonthFirstDate, getCurrentDate} from '@/util/date'
import {tableOption} from '@/const/crud/energy/search'
import { remote } from "@/api/admin/dict";
import { meterRead, selectDropList } from '@/api/energy/energy'
export default {
  components: {
    Wrap
  },
  data () {
    return {
      form: {},
      optionsLy: [],
      optionsYb: [],
      defaultProps: {
          label: 'name',
          value: 'id'
      },
      treeData: [],
      optionsYbgnd: [],
      searchForm: {
        startDate: getCurrentDate('year'),
        endDate: getCurrentDate('year'),
      },
      tableData: [],
      page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 20 // 每页显示多少条
      },
      meterName: '',
      paramName: '',
      meterProdName: '多功能三相电表',
      tableLoading: false,
      tableOption: tableOption
    }
  },
  computed: {
      permissionList() {
          return {
              addBtn: false,
              delBtn: false,
              editBtn: false
          };
      }
  },
  created() {
      this.init()
  },
  methods: {
      init() {
          remote('energy_equipment_type').then(response => {
              this.optionsLy = response.data.data
          })
          this.changeYb('多功能三相电表')
      },
      changeYb(value) {
        let value1 = value ? value: '多功能三相电表'
        this.meterName = ''
        this.paramName = ''
        var field_reading = this.findObject(this.tableOption.column,'reading')
        selectDropList({equipmentType: value1}).then(response => {
          this.optionsYb = response.data.data
        })
        if (value == '水表') {
          field_reading.label = '仪表读数 （吨）'
          remote('energy_point_type_water').then(response => {
              this.optionsYbgnd = response.data.data
          })
        } else {
          field_reading.label = '仪表读数 （kW.h）'
          remote('energy_point_type').then(response => {
              this.optionsYbgnd = response.data.data
          })
        }
      },
      getList(page, params) {
          this.tableLoading = true
          if (this.searchForm.dateRange) {
              this.searchForm.startDate = this.searchForm.dateRange[0];
              this.searchForm.endDate = this.searchForm.dateRange[1];
          }
          if (this.meterName) {
            this.searchForm.meterName = this.meterName
          }
          if (this.paramName) {
            this.searchForm.paramName = this.paramName
          }
          if (this.meterProdName) {
            this.searchForm.meterProdName = this.meterProdName
          }
          meterRead(Object.assign({
              current: page.currentPage,
              size: page.pageSize
          }, params, this.searchForm )).then(response => {
              response.data.data.records.map(item => {
                item.reading = item.reading.toFixed(2)
              })
              this.tableData = response.data.data.records
              this.page.total = response.data.data.total
              this.tableLoading = false
          }).catch(() => {
              this.tableLoading=false
          })
      },
      sizeChange(pageSize){
          this.page.pageSize = pageSize
      },
      currentChange(current){
          this.page.currentPage = current
      },
      searchChange(form, done) {
          this.searchForm = form
          this.page.currentPage = 1
          this.getList(this.page, form)
          done()
      },
      refreshChange() {
          this.getList(this.page)
      }
  }
}
</script>

<style lang="scss" scoped>
</style>
